<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.8/lib/theme-chalk/index.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
</head>

<body>
<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.8/lib/index.js"></script>
<div id="app" style="margin-left: 10%;">
    <el-menu :default-active="activeIndex" mode="horizontal">
        <el-menu-item index="1">
            识别推荐

        </el-menu-item>
        <el-menu-item index="2">
            新型号上传
        </el-menu-item>
    </el-menu>
    <div style="width: 100%;">
        <div style="margin-left: 38%; width: 32%;">
            <el-image :src="selectedImage" :fit="contain" style="width: 200px; height: 200px;"></el-image>
            <el-upload action="reg" :http-request="myUpload" auto-upload="true">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </div>
        <div style="margin-left: 14%; width: 60%;">
            <el-input style="margin: 4%" v-model="description" placeholder="description"></el-input>
            <el-input style="margin: 4%" v-model="category" placeholder="category"></el-input>
            <el-button @click="updateTap">上传</el-button>
        </div>
    </div>
</div>
<script>
    new Vue({
        data() {
            return {
                selectedImage: null,
                activeIndex: '2',
                img: '',
                description: '',
                category: ''
            };
        },
        methods: {
            getBase64Image(img) {
                var canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, img.width, img.height);
                var dataURL = canvas.toDataURL("image/png");
                this.selectedImage = dataURL;
                return dataURL.replace("data:image/png;base64,", "");
            },
            main(sh_src) {
                var img = new Image();
                img.src = sh_src; //此处自己替换本地图片的地址
                img.crossOrigin = 'anonymous'
                img.onload = () => {
                    data = this.getBase64Image(img);
                    this.img = data;
                }
            },
            myUpload(file, fileList) {
                console.log('upload');
                console.log(file);
                const inputFile = file.file;
                if (inputFile) {
                    const reader = new FileReader();
                    //获得本地的图片地址  放在reader.result内
                    reader.readAsDataURL(inputFile);
                    reader.onload = () => {
                        this.main(reader.result);
                    }
                }
            },
            updateTap() {
                $.ajax({
                        url: 'updateTap',
                        type: 'post',
                        data: {
                            'img': this.img,
                            'category': this.category,
                            'description': this.description
                        },
                        success: (data) => {
                            console.log('success');
                            console.log(data);
                        }
                    })
            }
        }
    }).$mount('#app')
</script>
</body>

</html>